﻿window.onload = function () {
    var canvas = document.getElementById('map-pic');
    if (canvas != null) {
        var $mapcontain = $('#content #map-container');
        var $map = $('#map-pic');
        var $body = $('#body');
        var $header = $('#header');
        var $butdir = $('.butdir');
        var $butsside = $('#but_ssidebar');
        var $buthside = $('#but_hsidebar');
        var $leftbox = $('#leftbox');
        var $sidebar = $('#sidebar');
        var $flaga = $('#indicateA');
        var $flagb = $('#indicateB');
        var $item0 = $('#contextmenu_map .mn_item0');
        var $item1 = $('#contextmenu_map .mn_item1');
        var $butzoom = $('.butzoom');
        var $contextmenu = $('#contextmenu_map');
        var paint = canvas.getContext('2d');
        var cellwidth = 990;
        var cellheight = 490;
        var rows = 5;
        var cols = 8;
        var pathimg = "../MapData/images/";
        var extension = ".jpg";
        var Mapx = 0;
        var Mapy = 0;
        var curMapx = 0;
        var curMapy = 0;
        var mapcurTop = 0;
        var mapcurLeft = 0;
        var width = 0;
        var height = 0;
        var fmapwidth = cellwidth * cols;
        var fmapheight = cellheight * rows;
        var rmapwidth = 0;
        var rmapheight = 0;
        var sidewidth = $sidebar.width();
        var levelz = 1;
        var linedr = false;
        $(window).resize(function () {
            resizewindow();
        });
        function resizewindow() {
            $body.css('height', $(window).height() - $header.height() - 2);
            $map.height($mapcontain.height());
            $map.width($mapcontain.width());
            canvas.width = $mapcontain.width();
            canvas.height = $mapcontain.height();
            width = canvas.width;
            height = canvas.height;
            rmapwidth = fmapwidth - width + 100;
            rmapheight = fmapheight - height + 100;
            var inter = setInterval(function () {
                DrawMap();
                if (inter >= 1000) clearInterval(inter);
            }, 200);
        }
        function Top(el) {
            return GetNumber(el.css('top'));
        }
        function Left(el) {
            return GetNumber(el.css('left'));
        }
        function GetNumber(input) {
            return Number(input.substr(0, input.length - 2));
        }
        function MapCell(link) {
            this.row = Number(link.substr(link.length - 8, 2));
            this.col = Number(link.substr(link.length - 6, 2));
            this.posx = this.col * cellwidth;
            this.posy = this.row * cellheight;
            this.imgob = new Image();
            this.imgob.src = link;
            this.Draw = function () {
                paint.drawImage(this.imgob, 0, 0, this.imgob.width, this.imgob.height, this.posx + curMapx, this.posy + curMapy, cellwidth, cellheight);
            };
        };
        function Flag(el) {
            this.top = 0;
            this.left = 0;
            this.el = el;
            this.UpdatePosition = function () {
                this.top = GetNumber(el.css('top'));
                this.left = GetNumber(el.css('left'));
            }
            this.Position = function (top, left) {
                el.css({ 'top': top, 'left': left });
            }
        }
        function pad2(val) {
            return (val > 9 ? "" : "0") + val.toString();
        }
        var img_arrs = new Array();
        for (var i = 0; i < rows; i++) {
            for (var j = 0; j < cols; j++) {
                img_arrs[i * cols + j] = new MapCell(pathimg + pad2(i) + pad2(j) + extension);
            }
        }
        var Fa = new Flag($flaga);
        var Fb = new Flag($flagb);
        function UpdateFlag() {
            Fa.Position(curMapy - Mapy + Fa.top, curMapx - Mapx + Fa.left);
            Fb.Position(curMapy - Mapy + Fb.top, curMapx - Mapx + Fb.left);
        }
        function RefreshFlag() {
            Fa.UpdatePosition();
            Fb.UpdatePosition();
        }
        function DrRoad() {
            if (($flaga.css('display') == 'block') && ($flagb.css('display') == 'block')) {
                paint.beginPath();
                paint.strokeStyle = '#7200ff';
                paint.lineCap = 'round';
                paint.lineWidth = 5;
                paint.moveTo(Left($flaga) + 15, Top($flaga) + 42);
                paint.lineTo(Left($flagb) + 15, Top($flagb) + 42);
                paint.stroke();
            }
        }
        function inView(mcell) {
            var nx = mcell.posx + curMapx;
            var nxw = nx + cellwidth;
            var ny = mcell.posy + curMapy;
            var nyh = ny + cellheight;
            if (((nx >= 0 && nx <= width) || (nxw >= 0 && nxw <= width))
                && ((ny >= 0 && ny <= height) || (nyh >= 0 && nyh <= height)))
                return true;

            return false;
        }
        function FixMapPosition() {
            var done = false;

            if (curMapx > 100 + sidewidth) { curMapx = 100 + sidewidth; done = true; }
            else if (curMapx < -rmapwidth) { curMapx = -rmapwidth; done = true; }

            if (curMapy > 100) { curMapy = 100; done = true; }
            else if (curMapy < -rmapheight) { curMapy = -rmapheight; done = true; }

            return done;
        }
        function DrawMap() {
            paint.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < rows; i++) {
                for (var j = 0; j < cols; j++) {
                    var mCell = img_arrs[i * cols + j];
                    if (inView(mCell)) {
                        mCell.Draw();
                    }
                }
            }
            DrRoad();
        }
        $buthside.click(function () {
            $sidebar.animate({ left: -350 }, 'normal', function () {
                $butsside.fadeIn('fast');
            });
            $leftbox.fadeOut('fast');
            if (curMapx > 100) {
                ChangeMapPosition(-sidewidth, 0, 26, false);
            }
            sidewidth = 0;
        });
        $butsside.click(function () {
            $(this).fadeOut('fast', function () {
                $sidebar.animate({ left: 0 }, 'normal', function () {
                    $leftbox.fadeIn('fast');
                });
            });
            sidewidth = $sidebar.width();
        });
        $map
        .bind('dragstart', function (e) {
            $(this).css('cursor', 'pointer');
            mapcurTop = e.offsetY;
            mapcurLeft = e.offsetX;
            RefreshFlag();
        })
        .bind('drag', function (e) {
            curMapx = e.offsetX - mapcurLeft + Mapx;
            curMapy = e.offsetY - mapcurTop + Mapy;
            FixMapPosition();
            UpdateFlag();
            DrawMap();
        }).bind('dragend', function (e) {
            $(this).css('cursor', 'auto');
            Mapx = curMapx;
            Mapy = curMapy;
        });
        function ChangeMapPosition(deltax, deltay, duration, fixpos) {
            var dirx = deltax * 1.0 / duration;
            var diry = deltay * 1.0 / duration;
            var time = duration;
            var stop = false;
            RefreshFlag();
            var inter = setInterval(function () {
                curMapx += dirx;
                curMapy += diry;

                if (fixpos) stop = FixMapPosition();
                UpdateFlag();
                DrawMap();
                if (time-- == 0 || stop) {
                    Mapx = curMapx;
                    Mapy = curMapy;
                    clearInterval(inter);
                }
            }, 10);
        }
        $mapcontain.bind('contextmenu', function (e) {
            var mnHeight = $contextmenu.height();
            var mnWidth = $contextmenu.width();
            var top = 0;
            var left = 0;
            left = (e.pageX + mnWidth < $(document).width()) ? e.pageX : e.pageX - mnWidth;
            top = (e.pageY + mnHeight < $(document).height()) ? e.pageY : e.pageY - mnHeight;
            $contextmenu.css({ display: 'block', top: top - $header.height(), left: left });
            xcurR = e.pageX;
            ycurR = e.pageY;
            e.preventDefault();
        });
        $item0.click(function (e) {
            $flaga.css({ 'top': ycurR - $header.height() - 43, 'left': xcurR - 15, 'display': 'block' });
            IndexFlag();
            DrawMap();
        });
        $item1.click(function (e) {
            $flagb.css({ 'top': ycurR - $header.height() - 43, 'left': xcurR - 15, 'display': 'block' });
            IndexFlag();
            DrawMap();
        });
        $butdir.click(function () {
            var idel = $(this).attr('id');
            if (idel == "movetop") {
                ChangeMapPosition(0, -100, 10, true);
            } else if (idel == "movebottom") {
                ChangeMapPosition(0, 100, 10, true);
            } else if (idel == "moveleft") {
                ChangeMapPosition(-100, 0, 10, true);
            } else {
                ChangeMapPosition(100, 0, 10, true);
            }
        });
        function IndexFlag() {
            var aIndex = 0;
            var bIndex = 0;
            if (GetNumber($flaga.css('top')) > GetNumber($flagb.css('top'))) {
                aIndex = 2;
                bIndex = 1;
            } else {
                aIndex = 1;
                bIndex = 2;
            }
            $flaga.css('z-index', aIndex);
            $flagb.css('z-index', bIndex);
        }
        function FlagDrag(flag) {
            var flagTop = 0;
            var flagLeft = 0;
            var curLeft = 0;
            var curTop = 0;
            flag.find('span').bind('dragstart', function (e) {
                $(this).css('cursor', 'pointer');
                flagTop = GetNumber(flag.css('top'));
                flagLeft = GetNumber(flag.css('left'));

                curTop = e.offsetY;
                curLeft = e.offsetX;
            })
        .bind('drag', function (e) {
            flag.css({ 'top': flagTop + e.offsetY - curTop, 'left': flagLeft + e.offsetX - curLeft });
            IndexFlag();
            DrawMap();
        }).bind('dragend', function (e) {
            $(this).css('cursor', 'auto');
        });
        }
        FlagDrag($flaga);
        FlagDrag($flagb);
        /*function XenZ() {
        var delta = 0.0025;
        var lvz = levelz;
        levelz+=0.05;
        var inter = setInterval(function () {
        paint.scale(lvz += delta, lvz);
        DrawMap();
        if (lvz >= levelz) {
        clearInterval(inter);
        }
        }, 10);
        }*/
        /*$butzoom.click(function () {
        var idel = $(this).attr('id');

        if (idel == "pluszoom") {
        XenZ();
        } else {
        zoomMap(zoomlevel - 1);
        }

        });*/
        resizewindow();
    } else alert("NULL");
};